@import 'reset';
@import "mixin";
.reset();

.container{
   max-width: 640px;
   min-width: 320px;
   height: 2000px;
   margin:0 auto;
   background: lightgoldenrodyellow;
  //  头部
  .header{
    display: flex;
    align-items: center;
    height: .7rem;
    background: @mainBGColor;
    color: white;
    >div{
      flex: 1;
      >i{
        font-size: .3rem;
      }
      &.msg{
        flex: 0 0 .8rem;
        position: relative;
        padding-left: .5rem;
        >i::after{
          content: '';
          position: absolute;
          width: .12rem;
          height: .12rem;
          background: white;
          top: .02rem;
          left: .72rem;
          border-radius: 50%;
        }
      }
      &.logo{
        text-align: center;
        >.logo-img{
          display: inline-block;
          height: .3rem;
          display: inline-block;
          width: 1.2rem;;
          vertical-align: middle;
          background: url('../images/wap_logo@3x_581de69e.png') no-repeat;
          background-size: 100% 100%;
        }
        >i{
          display: inline-block;
          vertical-align: middle;
        }
        
      }
      &.search{
        flex: 0 0 .8rem;
        text-align: right;
        padding-right: 50px;
      }
    }
  }
// 导航栏
.scrollx{
  height: .6rem;
  overflow: hidden;
  position: relative;
  .scrollx-content{
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;

    
    // height: .6rem;
    background: @navBGColor;
    border-bottom: .01rem solid @navBDColor;
    // overflow: hidden;
    >ul{
      padding: 0 .16rem 0 .1rem;
      >li{
        display: inline-block;
        font-size: .25rem;
        line-height: .59rem;
        padding: 0 .2rem;
        margin-bottom: .3rem;
        &.active{
          color: @mainBGColor;
        }
      }
    }
  
  }
  >i{
    position: absolute;
    font-size: .3rem;
    width: .6rem;
    height: .6rem;
    line-height: .6rem;
    text-align: center;
    border-left: .01rem solid @navBDColor;
    background: @navBGColor;
    top: 1px;
    right: 0px;;
    color: @mainBGColor;
    z-index: 100;
  }
}
  
  // 新闻栏
.swiper-container{
  position: fixed;
  top: 1.3rem;
  right: 0;
  bottom: 0;
  left: 0;
  >.swiper-wrapper{
    >.swiper-slide{
        margin-top: .15rem;
        padding: 0 .25rem;
        >ul{
            >li{
                border-bottom:.01rem solid @navBDColor;
                padding:.1rem 0;
                &.thumb{
                    display: flex;
                    align-items: center;
                    >.poster{
                        flex: 0 0 1.6rem;
                        overflow: hidden;
                        >img{
                            width: 100%;
                            height: 1.3rem;
                            object-fit: cover;
                            transition: all .5s ease-in;
                            &:hover{
                              .scale11();
                            }
                        }
                    }       
                }
                >.news-title{
                    flex:1;
                    margin-left: .2rem;
                    >h2{
                        line-height: .45rem;
                        font-size: .2rem;
                        >a{
                           color: #222;
                           font-weight: bold;
                           .ellipsis-multi(2);
                        }
                    }
                } 
                
                ul.tags{
                    height:.4rem;
                    li{
                      display:flex;
                      align-items: center;
                      height:.4rem;
                      float:left;
                      padding:0 .05rem;
                      &.tagSZ{
                        a{
                          border:.01rem solid @tagBDColor;
                          color:@tagFontColor;
                        }
                      }
                      &.tagKJ{
                        a{
                          border:.01rem solid @tagBDColor;
                          color:@tagFontColor;
                        }
                      }
                       &.tagSH{
                        a{
                          border:.01rem solid @tagBDColor;
                          color:@tagFontColor;
                        }
                      }
                      a{
                        display:block;
                        padding:0 .05rem;
                        color:@navFontColor;
                      }
                      &:nth-child(2){
                        width: .2rem;
                        // height:.2rem;
                        padding:0;
                        border-radius:50%;
                        a{
                          padding:0;
                          
                        }
                      }
                    }
                }
                &.fourthumbs{
                  >.imgs{
                      display: flex;
                      >li{
                          flex:1;
                          margin-right:.1rem;
                          &:last-child{
                          margin-right:0;
                          }   
                          >a{
                              display: block;
                              overflow: hidden;
                              >img{
                                width: 100%;
                                transition:all .5s ease-in;
                                vertical-align: middle;
                                &:hover{
                                  .scale11();
                                }
                              }
                          }  
                      }
                  }
                  
                }
                &.shipin{
                  position: relative;
                  >.poster{
                    position: relative;
                    >img{
                      width: 100%;
                      height: auto;
                      object-fit: cover;
                    }
                    >span{
                      position: absolute;
                      margin-top: -.3rem;
                      margin-left: -.3rem; 
                      top:50%;
                      left: 50%;
                      width: .6rem;
                      height: .6rem;
                      border-radius: 50%;
                      border:.02rem solid white;
                      line-height: .6rem;
                      text-align: center;
                      font-size: .2rem;
                      color:white;
                      background: rgba(30, 30, 30,.2); 
                      cursor: pointer;
                    }
                  }
                  >.news-title{
                    position: absolute;
                    top: .1rem;
                    left:-.2rem;
                    width: 100%;
                    z-index: 100;
                    background: linear-gradient(to bottom, rgba(242, 232, 232, 0.86), rgba(49, 44, 44, 0.17));
                    >h2{
                      text-indent: .2rem;
                      >a{
                        color: white;
                      }
                    }
                  }
                  
                }
                &.shipin2{
                  position: relative;
                  >.poster{
                    position: relative;
                    >img{
                      width: 100%;
                      height: auto;
                      object-fit: cover;
                    }
                    >span{
                      position: absolute;
                      margin-top: -.3rem;
                      margin-left: -.3rem; 
                      top:50%;
                      left: 50%;
                      width: .6rem;
                      height: .6rem;
                      border-radius: 50%;
                      border:.02rem solid white;
                      line-height: .6rem;
                      text-align: center;
                      font-size: .2rem;
                      color:white;
                      background: rgba(30, 30, 30,.2); 
                      cursor: pointer;
                    }
                  }
                  >.news-title{
                    position: absolute;
                    bottom: .54rem;
                    left:-.2rem;
                    width: 100%;
                    z-index: 100;
                    background: linear-gradient(to top, rgba(242, 232, 232, 0.86), rgba(49, 44, 44, 0.17));
                    >h2{
                      text-indent: .2rem;
                      >a{
                        color: white;
                      }
                    }
                  }
                  
                }
            }
        }
      
    }
  }
}

 

}

@media screen and (max-width:550px){
  html{
    font-size: 550%;
  }
}

@media screen and (max-width:450px){
  html{
    font-size: 500%;
  }
}

@media screen and (max-width:400px){
  html{
    font-size: 400%;
  }
}
